<script setup>
import { useWindowScroll } from '@vueuse/core'
import { ref, watch } from 'vue'
import Introduction from '~/components/about/Introduction.vue'
import { useHeader } from '~/composables/header'

const { locale } = useLocale()
const language = ref(locale.value === 'zh' ? 'zh' : 'en')

const { changeMode } = useHeader('transparent')
const { y } = useWindowScroll()

watch(y, (newY) => {
  changeMode(newY > 90 ? 'light' : 'transparent')
})

const { width } = useWindowSize()
const windowWidth = ref(width.value)
watch(width, (newWidth) => {
  windowWidth.value = newWidth
})

definePageMeta({
  title: '关于我们',
})

const tablist = ref([
  {
    title: language.value === 'zh' ? '公司简介' : 'Company Profile',
  },
//   {
//     title: language.value === 'zh' ? '公司荣誉' : 'Company Honor',
//   },
//   {
//     title: language.value === 'zh' ? '发展历程' : 'Development History',
//   },
])
// 控制tab切换
const activeName = ref(0)

// tab锚点滚动
function tabChange(index) {
  activeName.value = index
  if (index === 0)
    y.value = 200

  else if (index === 1)
    y.value = windowWidth.value > 828 ? 1200 : 1000

  else if (index === 2)
    y.value = windowWidth.value > 828 ? 2500 : 1400

  // y.value = 200
}
useHead({
  title: `关于我们-超益钢业`,
})
</script>

<template>
  <div>
    <div h="[400px]" class="flex flex-col items-center justify-center bg-[url(~/assets/img/img_about_banner.png)]">
      <h1 class="text-[46px] text-[#fff]" data-aos="fade-down" data-aos-delay="100">
        {{ $t('menu.about_us') }}
      </h1>
      <h2 text="uppercase [#ffffff33] [42px]" data-aos="fade-up" data-aos-delay="100">
        ABOUT US
      </h2>
    </div>
    <ul flex="~ 1" style="margin: 20px;">
      <li v-for="(tab, index) in tablist" :ref="tab.title" :key="index" style="margin: 20px;" :class="{ first: index === 0, active: windowWidth > 828 ? true : false }" @click="tabChange(index)">
        {{ tab.title }}
      </li>
    </ul>
    <div mt="90px" :style="{ padding: windowWidth > 828 ? '0 94px' : '0 5%' }">
      <Introduction />
    </div>
  </div>
</template>

<style scoped>
.active {
  margin: 20px;
  cursor: pointer;
  &:hover {
    color: #3981f7;
    font-weight: 600;
  }
}

.first {
  color: #3981f7;
  font-weight: 600;
}
</style>
